<template>
  <div>
    <!-- <span>
      <div class="record" :class="{'record-in': voiceData === null }" @click="voiceIn">
        <img src="../assets/语音.png" />语音
      </div>
      <div v-if="voiceData" class="record record-remove" @click="voiceRemove">x</div>
    </span> -->
    <div class="voice-wraper">
        <audio ref='audios' :src="voiceData">
        </audio>
        <label>
            <img src="../assets/语音.png" />
            <span style="font-size: 14px;">语音</span>            
            <input type="file" class="file-choose" ref="voiceInput" @change="changeVoice" accept="audio/*" capture="microphone" />
        </label>
        <i v-show="voiceData" class="play-voice el-icon-caret-right" @click="playVoice"></i>
        <div v-show="voiceData" class="record-remove" @click="voiceRemove">x</div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'InputVoice',
    data () {
        return {
            recTime: '',
            voiceData: null
        };
    },
    methods: {
        voiceRemove () {
            this.voiceData = null;
            this.$emit('voiceResult', '');
        },
        changeVoice() {
            let inputFile = this.$refs.voiceInput;
            let files = inputFile.files;
            console.log(files[0]);
            let filesType = files[0].type;
            if (!filesType) {
                let arr = files[0].name.split('.');
                filesType = arr[arr.length -1];
            }
            for (let i = 0;i < files.length;i++) {
                // console.log(files[i]);
                if (filesType.indexOf('audio') > -1 && files[i].size <= 50 * 1024 * 1024) {
                    // this.upload(files[i]);
                } else {
                    this.$alert(`请上传音频格式文件，小于50M`);
                }
            }
            inputFile.value = '';
        },
        // 开始上传
        async upload (fileObj) {
            // 存储文件流            
            let formData = new FormData();
            formData.append('file', fileObj);
            console.log(JSON.stringify(fileObj));
            this.$Posting(this.$api.uploadFile, formData).then(res => {
                console.log(JSON.stringify(res));
                if (res.isSuccess) {
                    this.voiceData = res.data.accessUrl; // 上传成功后返回的音频地址
                    this.$emit('voiceResult', res.data.accessUrl);
                } else {
                    // this.voiceData = '';
                }
            }).catch(err => {
                console.log('upload error', err);
                // this.$emit('uploadError', {token, err});
            });
        },
        playVoice() {
            this.$refs.audios.play();
        }
    }
};
</script>

<style scoped lang='scss'>
.voice-wraper {
    width: 100px;
    height: 36px;
    padding: 0 4px 0 4px;
    font-size: 16px;
    border: 1px solid #dddee3;
    box-sizing: border-box;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    label {
        flex: 1;
        display: flex;
        align-items: center;
        img {
            width: 16px;
            height: 16px;
        }
        .file-choose {
            outline: none;
            position:absolute; 
            left: -9999px;                
        }
    }
    .play-voice { // 播放的图标
        cursor: pointer;
        padding: 4px;
    }
    .record-remove {
        padding: 0 4px;
        cursor: pointer;
    }
}
</style>
